<template>
	<view>
		<!-- 未登录时 -->
		<view v-if="user == '' || user == null">
			<view style="height: 100vh;display: flex; justify-content: center; align-items: center;">
				<view style="display: flex; transform: translate(0, -50%);" @click="toLoginPage">
					<image :src="iconList[4]" style="width: 100px;" mode="widthFix"></image>
					
					<view style="display: flex; justify-content: center; align-items: center;">
						<view style="text-align: center;">
							<text style="font-size: 50px; color: #5ac725;">立即登录</text>
							<view>
								<text style="font-size: 24px; color: #5ac725;">即刻登录，探索更多</text>
							</view>
						</view>
					</view>
				</view>
				
				
				
			</view>
			
			
		</view>
		
		<!-- 已登录时 -->
		<view v-else>
			<!-- 个人信息区 -->
			<view style="margin: 30px 10px 30px 10px; display: flex;"
				@click="toUserMainPage">
				<!-- 头像 -->
				<view>
					<view class="u-demo-block">
						<view class="u-demo-block__content">
							<view class="u-page__image-item">
								<u--image shape="circle" :src="icon1" width="100px" height="100px">
									<template v-slot:loading>
										<u-loading-icon color="red"></u-loading-icon>
									</template>
								</u--image>
							</view>
						</view>
					</view>
				</view>
				<!-- 用户信息 -->
				<view>
					<view style="margin-left: 20px;">
						<text style="font-size: 28px; font-weight: bold;">{{user.nickName}}</text>
					</view>
					<view style="margin-left: 22px;">
						<text style="font-size: 18px;">手机号: {{user.phoneNumber}}</text>
					</view>
				</view>
			
			</view>
			
			<!-- 我的蚂力值 -->
			<view style="margin: 30px 10px 30px 10px; background-color: #f5fff0; border-radius: 15px;">
				<view style="height: 50px; background-color: #53c21d; border-radius: 15px 15px 0 0;">
					<view style="font-size: 18px; font-weight: bold; line-height: 50px; margin-left: 15px;">
						<text>我的蚂力值 {{user.antPower}}</text>
						<view style="font-size: 16px; font-weight: bold; line-height: 50px; margin-right: 15px; float: right;">
							<text>></text>
						</view>
					</view>	
				</view>
				
				<view style="height: 80px; display: flex;
					font-size: 16px; font-weight: bold; text-align: center;">
					<view style="width: 33%; margin-top: 15px;">
						<text>{{user.favorities}}</text>
						<view style="margin-top: 5px;">
							<text>我的收藏</text>
						</view>
					</view>
					<view style="width: 33%; margin-top: 15px;">
						<text>{{user.records}}</text>
						<view style="margin-top: 5px;">
							<text>历史浏览</text>
						</view>
					</view>
					<view style="width: 33%; margin-top: 15px;">
						<text>{{user.posts}}</text>
						<view style="margin-top: 5px;">
							<text>我的帖子</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 我的交易 -->
			<view style="margin: 30px 10px 30px 10px; background-color: #f5fff0; border-radius: 15px;">
				<view style="display: flex; height: 50px;">
					<view style="margin-left: 15px; font-size: 18px; line-height: 50px; font-weight: bold;">
						<text>我的交易</text>
					</view>
					<view style="margin-left: 5px; font-size: 12px; line-height: 55px;">
						<text>在蚂蚁赚了 {{user.mySell}} 元</text>
					</view>
				</view>
				
				<view>
					<view style="padding: 20px; display: flex;">
						<u--image :src="iconList[0]" width="50px" height="50px"></u--image>
						<view style="font-size: 18px; line-height: 50px; margin-left: 10px" @click="fabu">
							<text>我发布的</text>
						</view>
					</view>
					<view style="padding: 20px; display: flex;">
						<u--image :src="iconList[1]" width="50px" height="50px"></u--image>
						<view style="font-size: 18px; line-height: 50px; margin-left: 10px">
							<text>我卖出的</text>
						</view>
					</view>
					<view style="padding: 20px; display: flex;">
						<u--image :src="iconList[2]" width="50px" height="50px"></u--image>
						<view style="font-size: 18px; line-height: 50px; margin-left: 10px">
							<text>我买到的</text>
						</view>
					</view>
				</view>
			
			</view>
			
			<view style="margin: 30px 10px 30px 10px; background-color: #fef0f0; border-radius: 15px;">
				<view style="padding: 20px; display: flex;">
					<u--image :src="iconList[3]" width="50px" height="50px"></u--image>
					<view style="font-size: 18px; line-height: 50px; margin-left: 10px">
						<text @click="quit">退出登录</text>
					</view>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
import loadingIcon from '../../uni_modules/uview-ui/libs/config/props/loadingIcon';
	export default {
		data() {
			return {
				logo : '',
				icon1: '',
				user: {},
				iconList: [
					getApp().globalData.img_url + 'img%2Flogo%2F电脑.png',
					getApp().globalData.img_url + 'img%2Flogo%2F钱包.png',
					getApp().globalData.img_url + 'img%2Flogo%2F订单.png',	
					getApp().globalData.img_url + 'img%2Flogo%2F退出登录.png',
					getApp().globalData.img_url + 'img%2Flogo%2Flogo.png',
				]
			}
		},
		onLoad() {
			this.logo = getApp().globalData.img_url + 'img/touxiang/xiaomayi.png';
			
			// 获取登录状态
			let that = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					that.user = res.data;
					// console.log(that.user)
				},
				fail() {
					that.user = null;
				}
			});
			
			setTimeout(()=>{
				this.icon1 = this.user.icon
			},1000);
			
			
		},
		mounted() {
			if (!(this.user == '' || this.user == null)) {
				this.updateUser();
			}
		},
		methods: {
			updateUser() {
				var that = this;
				uni.request({
					method: 'GET',
					url: getApp().globalData.url + '/getUser?userId=' + that.user.id,
					success(res) {
						// console.log(res.data)
						that.user = res.data;
						uni.setStorage({
							key: 'user',
							data: that.user
						})
					}
				})
			},
			toUserMainPage() {
				let that = this;
				uni.navigateTo({
					url: '/pages/UserMainPage/UserMainPage?userId=' + that.user.id
				});
			},
			quit(){
				// uni.navigateTo({
				// 	url:'/pages/6_Login1Page/Login'
				// })
				uni.removeStorage({
					key: 'user'
				})
				this.user = null;
				
			},
			toLoginPage() {
				uni.navigateTo({
					url:'/pages/6_Login1Page/Login'
				})
			},
			fabu(){
				uni.navigateTo({
					url:'/pages/UserWoFaBuPage/UserWoFaBuPage'
				})
			}
			
		}
	}
</script>

<style>

</style>